<template>
  <el-dialog append-to-body :title="title + '- 详情'" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :visible.sync="visible" :width="'640px'">
    <ul v-loading="loading" class="my-list">
        <li>
            <div>权限描述</div>
            <div v-if="pageData1 && pageData1.remark" v-html="pageData1.remark"></div>
            <div v-else>无</div>
        </li>
        <li>
            <div>权限状态</div>
            <el-tag type="success" v-if="pageData1 && pageData1.roleStatus == 0">启用</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
        </li>
        <li v-if="pageData2">
            <div>被授权的部门</div>
            <div v-if="pageData2 && pageData2.sysDepartment && pageData2.sysDepartment.length">{{pageData2.sysDepartment.join('、')}}</div>
            <div v-else>无</div>
        </li>
        <li v-if="pageData2">
            <div>被授权的成员共 <span style="color: #FFAB2B">{{pageData2.sysUser && pageData2.sysUser.length ? pageData2.sysUser.length : 0}}</span> 人</div>
            <div v-if="pageData2 && pageData2.sysUser && pageData2.sysUser.length">{{pageData2.sysUser.join('、')}}</div>
            <div v-else>无</div>
        </li>
    </ul>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button :disabled="submitLoading" @click="closeModal()">取消</el-button> -->
      <el-button type="primary" :loading="submitLoading" @click="closeModal()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { ReturnRoleDetails, GetRoleById } from '@/views/user-management/services/index';
export default {
  props: ['visible', 'itemId', 'title'],
  data() {
    return {
      loading: true,
      pageData1: null,
      pageData2: null,
      submitLoading: false
    }
  },
  watch: {
    itemId: {
      immediate: true,
      handler(newValue, oldValue) {
        if (!newValue) return;
        this.getDetail();
      }
    }
  },
  methods: {
    closeModal() {
      this.$emit('update:visible', false);
    },
    getDetail() {
      this.loading = true;
      GetRoleById({id: this.itemId})
      .then(data => {
        if (data.code == 200) {
          this.pageData1 = data.data;
        }
      })
      ReturnRoleDetails({roleId: this.itemId})
      .finally(() => this.loading = false)
      .then(data => {
        if (data.code == 200) {
          this.pageData2 = data.data;
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-list {
  padding: 0;
  margin: 0;
  list-style: none;
  color: #333333;
  font-size: 14px;

  > li {
    padding-bottom: 24px;
    
    > div:nth-child(1) {
      color: #999999;
      padding-bottom: 16px;
    }
  }
}
</style>